<template lang="html">
  <div class="box">
      <div class="header">
          <!-- <el-form class="filterCondition demo-form-inline" ref="form"  :inline="true" label-width="80px">
              <el-input placeholder="输入市代名称" v-model="keyword" style="width: 420px;">
                <el-button slot="append" style="width: 120px;" @click="search()">搜索</el-button>
              </el-input>
          </el-form> -->
      </div>
      <div class="body">
          <el-table :data="tableData.list" style="width: 100%">
              <el-table-column label="市代名称" prop="company" align="center" width=""></el-table-column>
              <el-table-column label="负责人" prop="leader" align="center" width=""></el-table-column>
              <el-table-column label="联系电话" prop="phone" align="center" width=""></el-table-column>
              <el-table-column label="地区" align="center" width="">
                <template slot-scope="scope">
                  <p v-for="i,k in scope.row.area" :key="k">{{i.name}}</p>
                </template>
              </el-table-column>
              <el-table-column label="收入" align="center">
                <el-table-column label="售卡分佣" align="center" width="">
                  <template slot-scope="scope">
                    <el-button @click="onshow(scope.row)" type="primary" size="mini" plain>{{scope.row.cardIncome}}</el-button>
                  </template>
                </el-table-column>
                <!-- <el-table-column label="推荐奖励" align="center" width="">
                  <template slot-scope="scope">
                        <el-button @show="onshow2(scope.row)" type="primary" size="mini" plain>{{scope.row.recom_money}}</el-button>
                  </template>
                </el-table-column> -->
              </el-table-column>
              <el-table-column label="支出" align="center">
                <el-table-column label="系统使用费" prop="systemExpend" align="center" width="">
                  <template slot-scope="scope">
                      <el-button @click="onshow3(scope.row)" type="primary" size="mini" plain>{{scope.row.recom_money}}</el-button>
                  </template>
                </el-table-column>
                <el-table-column label="区域押金" prop="pledge" align="center" width="">
                  <template slot-scope="scope">
                      <el-button @click="onshow4(scope.row)" type="primary" size="mini" plain>{{scope.row.recom_money}}</el-button>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="提现" prop="cash_money" align="center">
                <template slot-scope="scope">
                  <el-button @click="onshow5(scope.row)" type="primary" size="mini" plain>{{scope.row.recom_money}}</el-button>
                </template>
              </el-table-column>
              <el-table-column label="系统余额" prop="balance" align="center" width=""></el-table-column>
              <el-table-column label="纯利" prop="profit" align="center" width=""></el-table-column>
          </el-table>
      </div>
      <div class="page_box">
          <el-pagination class="page" layout="prev, pager, next"
            @current-change="switchPage" :page-count='tableData.rows' >
          </el-pagination>
      </div>

      <el-dialog title="售卡分佣" :visible.sync="dialogTableVisible">
        <el-table :data="gridData.list">
          <el-table-column property="income" align="center"  width="100" label="售卡分佣"></el-table-column>
          <el-table-column property="agent_company" width="100" align="center" label="运营商"></el-table-column>
          <el-table-column property="shop_name" align="center" label="维修厂"></el-table-column>
          <el-table-column property="user_name" width="100" align="center" label="车主姓名"></el-table-column>
          <el-table-column property="card_price" width="100" align="center" label="购卡金额"></el-table-column>
          <el-table-column property="car_type" align="center" label="车型">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>{{scope.row.car_type}}-{{scope.row.car_brand}}</p>
                  <el-button slot="reference" type="primary" size="mini" plain>{{scope.row.car_brand}}</el-button>
                </el-popover>
            </template>
          </el-table-column>
          <el-table-column property="create_time" align="center" label="时间"></el-table-column>
        </el-table>
        <div class="page_box">
          <el-pagination class="page" layout="prev, pager, next"
            @current-change="onpage" :page-count='gridData.rows' >
          </el-pagination>
        </div>
      </el-dialog>

      <!-- <el-dialog title="推荐奖励" :visible.sync="dialogTableVisible2">
          <el-table >
            <el-table-column property="income" align="center"  width="100" label="推荐者"></el-table-column>
            <el-table-column property="agent_company" width="100" align="center" label="被推荐者"></el-table-column>
            <el-table-column property="shop_name" align="center" label="类型"></el-table-column>
            <el-table-column property="user_name" width="100" align="center" label="奖励金额"></el-table-column>
            <el-table-column property="card_price" width="100" align="center" label="时间"></el-table-column>
          </el-table>
      </el-dialog> -->

      <el-dialog title="系统使用费" :visible.sync="dialogTableVisible3">
        <el-table :data="gridData.list">
          <el-table-column property="company" align="center" label="市代名称"></el-table-column>
          <el-table-column property="phone" align="center" label="联系方式"></el-table-column>
          <el-table-column property="create_time" align="center" label="支付时间"></el-table-column>
          <el-table-column property="money" align="center" label="支付金额"></el-table-column>
        </el-table>
        <div class="page_box">
          <el-pagination class="page" layout="prev, pager, next"
            @current-change="onpage3" :page-count='gridData.rows' >
          </el-pagination>
        </div>
      </el-dialog>

      <el-dialog title="区域押金" :visible.sync="dialogTableVisible4">
        <el-table :data="gridData.list">
          <el-table-column property="company" align="center" label="市代名称"></el-table-column>
          <el-table-column property="phone" align="center" label="联系方式"></el-table-column>
          <el-table-column property="price" align="center" label="支付金额"></el-table-column>
          <el-table-column align="center" label="支付凭证">
            <template slot-scope="scope">
              <img :src="scope.row.voucher" :preview="scope.row.voucher" class="preview-img" alt="">
            </template>
          </el-table-column>
          <el-table-column property="city" align="center" label="地区"></el-table-column>
          <el-table-column property="create_time" align="center" label="支付时间"></el-table-column>
        </el-table>
        <div class="page_box">
          <el-pagination class="page" layout="prev, pager, next"
            @current-change="onpage4" :page-count='gridData.rows' >
          </el-pagination>
        </div>
      </el-dialog>

      <el-dialog title="提现" :visible.sync="dialogTableVisible5">
        <el-table :data="gridData.list">
          <el-table-column property="company" align="center" label="市代名称"></el-table-column>
          <el-table-column property="leader" align="center" label="负责人"></el-table-column>
          <el-table-column property="phone" align="center" label="电话"></el-table-column>
          <el-table-column property="money" align="center" label="提现金额"></el-table-column>
          <el-table-column property="create_time" align="center" label="提现时间"></el-table-column>
          <el-table-column property="audit_time" align="center" label="审核时间"></el-table-column>
          <el-table-column property="Auditor" align="center" label="审核人"></el-table-column>
        </el-table>
        <div class="page_box">
          <el-pagination class="page" layout="prev, pager, next"
            @current-change="onpage5" :page-count='gridData.rows' >
          </el-pagination>
        </div>
      </el-dialog>


  </div>
</template>

<script>
export default {
  data (){
    return {
      tableData:[],
      gridData: [],
      keyword:'',
      dialogTableVisible:false,
      dialogTableVisible2:false,
      dialogTableVisible3:false,
      dialogTableVisible4:false,
      dialogTableVisible5:false,
    }
  },
  created(){
    this.fundList()
    this.$preview.on('imageLoadComplete',(e,item)=>{
    	this.$preview.self.template.style.zIndex = 99999
    })
  },
  methods: {
    fundList(page = 1){
      this.tableData = []
      this.$http3.fundList({page}).
      then(res=>{
        this.tableData =
        res.data.code == 1?
        res.data.data:[]
      })
    },
    switchPage(p){
      this.fundList(p)
    },
    onshow(e){
      this.dialogTableVisible = true;
      this.currentRow = e;
      this.supplyCardIncList();
    },
    supplyCardIncList(page = 1){
      this.gridData = [];
      this.$http3.supplyCardIncList({
        gid: this.currentRow.gid,
        page: page
      }).then(res=>{
        this.gridData =
        res.data.code == 1?
        res.data.data: []
      })
    },
    onpage(p){
      this.supplyCardIncList(p);
    },
    onpage3(){
      this.supplySystemFeeList(p)
    },
    onpage4(){
      this.supplyPledgeList(p)
    },
    onpage5(p){
      this.supplyCashList(p);
    },
    onshow2(e){

    },
    onshow3(e){
      this.dialogTableVisible3 = true;
      this.currentRow = e;
      this.supplySystemFeeList();
    },
    supplySystemFeeList(page = 1){
      this.gridData = [];
      this.$http3.supplySystemFeeList({
        gid: this.currentRow.gid,
        page: page
      }).then(res=>{
        this.gridData =
        res.data.code == 1?
        res.data.data: []
      })
    },
    onshow4(e){
      this.dialogTableVisible4 = true;
      this.currentRow = e;
      this.supplyPledgeList();
    },
    supplyPledgeList(page = 1){
      this.gridData = [];
      this.$http3.supplyPledgeList({
        gid: this.currentRow.gid,
        page: page
      }).then(res=>{
        this.gridData =
        res.data.code == 1?
        res.data.data: []
        this.$previewRefresh()
      })
    },
    onshow5(e){
      this.dialogTableVisible5 = true;
      this.currentRow = e;
      this.supplyCashList();
    },
    supplyCashList(page = 1){
      this.gridData = [];
      this.$http3.supplyCashList({
        gid: this.currentRow.gid,
        page: page
      }).then(res=>{
        this.gridData =
        res.data.code == 1?
        res.data.data: []
      })
    },

  }
}
</script>

<style lang="css" scoped>
@import "../../my-style/app.css";

/deep/ .el-input-group__append, .el-input-group__prepend{
  background-color: #3498E9;
  border: none;
  color: white;
}

.preview-img{
  display: block;
  width: 100%;
  height: 30px;
}
.header{
  margin-bottom: 10px
}
.page_box{
  text-align: center;
}
</style>
